<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <!-- 知识分类选择器 -->
        <zs-fl-selector @chooseZsfl="handleZsfl"></zs-fl-selector>
      </el-aside>
      <el-container>
        <el-header>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="queryData.keyWord" placeholder="请输入关键词" @keyup.enter="getDataList()"/>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"  @click="getDataList()">
                    查询
                  </el-button>
                  <el-button type="default" @click="resetData()">清空</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-button style="float: right" type="danger" @click="removeBatch()" :disabled="selectedIds.length===0">
                批量删除
              </el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main><el-table :data="tableData" ref="multipleTableRef" @selection-change="handleSelectionChange" border stripe style="width: 100%" highlight-current-row>
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column label="知识封面" width="180">
      <template #default="scope">
        <el-image
          style="width: 50px; height: 50px"
          :src="scope.row.fj"
          :fit="fill"
        />
      </template>
    </el-table-column> -->
            <el-table-column prop="zsbt" label="知识库标题" width="180" align="center"/>
            <el-table-column prop="scsj" label="收藏时间" width="180" align="center"/>
            <el-table-column fixed="right" label="操作" width="300" align="center">
              <template #default="scope">
                <el-button  type="primary" plain v-permission="'knowledge.detail'" @click="$router.push({ name: '知识详情', params: { id: scope.row.zsid } })">
                    详情
                  </el-button>
                <el-button  type="danger" plain @click="removeSingle(scope.row.id)" v-permission="'collection.delete'">
                  删除收藏
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
            layout="total, sizes, prev, pager, next, jumper" /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { table } from 'console'
import { reactive, ref } from 'vue'
import { getListApi, deleteScApi } from '@/api/personal/collection.js'
import {
  ElInput,
  ElMessage,
  ElMessageBox,
  ElTable,
  FormInstance,
} from 'element-plus'
import ZsFlSelector from '@/views/common/ZsFlSelector.vue'
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const selectedIds = ref([]); // 被选中的id集合
const pageIndex = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const queryData = reactive({
  keyWord: '',
  zsfl: undefined,
})
/**
 * 行checkbox change事件
 */
 const handleSelectionChange = (selection: any) => {
  selectedIds.value = selection.map((item: any) => item.id);
}
// 点击分类
const handleZsfl = (zsflId: number) => {
  queryData.zsfl = zsflId

  console.log("知识分类为"+zsflId)
  // 触发查询
  getDataList()
}

// 批量
const removeBatch = () => {
  let ids = []
  var selectRows = multipleTableRef.value.getSelectionRows()
  selectRows.forEach(element => {
    ids.push(element.id)
  })
  if (ids.length == 0) {
    ElMessage({
      type: 'warning',
      message: '没有选择待删除的收藏',
    })
  } else {
    remove(ids)
  }
}

// 删除知识
const remove = ids => {
  // 确认是否删除
  ElMessageBox.confirm(`确认是否删除该收藏?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      deleteScApi(ids)
        .then(res => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })

          // 刷新列表
          getDataList()
        })
        .catch(e => {
          ElMessage({
            type: 'error',
            message: '删除失败！！！！',
          })
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除！！！！',
      })
    })
}

// 单个删除
const removeSingle = id => {
  // 获取被选择的行的id
  let ids = []
  ids.push(id)

  remove(ids)
}

// 修改每页数
const sizeChangeHandle = val => {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}
// 修改当前页
const currentChangeHandle = val => {
  pageIndex.value = val
  getDataList()
}

const resetData = () => {
  queryData.keyWord = '',
    queryData.zsfl = undefined
    getDataList()
}

// 获取表格数据
const getDataList = () => {
  getListApi({
    page: pageIndex.value,
    limit: pageSize.value,
    keyWord: queryData.keyWord,
    zsflId: queryData.zsfl,
    status: '0',
  }).then(res => {
    tableData.value = res.data.list
    total.value = res.data.totalCount
  })
}

getDataList()
</script>
